<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
    <link href="/css/main.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/styles/default.min.css">
</head>

<body>
    <div>
        <nav>
            <ul>
                <li>
                    <p class="nav-a" href="./doc/a.html">a.html<i></i>
                </li>
                <li>
                    <p class="nav-a" href="./doc/b.html">b.html</p>
                </li>
                <li>
                    <p class="nav-a" href="./book/helloworld.md">helloworld</p>
                </li>
            </ul>
        </nav>
        <div id="content">
            <div id="inner-page">
            </div>
        </div>
    </div>
    <script>
        marked.setOptions({
            renderer: new marked.Renderer(),
            highlight: function (code, language) {
                return hljs.highlight("python", code).value;
            },
            gfm: true,
            tables: true,
            breaks: false,
            pedantic: false,
            sanitize: false,
            smartLists: true,
            smartypants: false
        });
        $("p.nav-a").click(function () {
            console.log("click!")
            var url = $(this).attr("href");
            if (url.endsWith("md")) {
                var htmlObj = $.ajax({ url: url, async: false });
                $("#inner-page").html(marked(htmlObj.responseText));
                $("p.nav-a").css("color", "black");
                $(this).css("color", "red");
                hljs.initHighlighting();
            } else {
                $("#inner-page").load(url);
            }
            $("p.nav-a").css("color", "black");
            $(this).css("color", "red");
        })
    </script>
</body>

</html>